<template>
  <div class="statistics-content statistics-6">
    <div class="grid-top">
      <div class="grid grid-left">
        <div class="statistics-block">
          <div class="title-block">
            <div class="title-item">
              <div class="line"></div>
              <div class="title">市内区外异地就业人数</div>
            </div>
          </div>
          <div class="chart" id="chart1"></div>
        </div>
      </div>
      <div class="grid grid-center">
        <div class="number-block" style="position: relative;z-index: 1;" >
          <NumberItem class="number-item" v-for="item in numberData"
                      :key="item.id"
                      :name="item.name"
                      :number="item.number"
                      :color="item.color"
                      :icon="item.icon"
          ></NumberItem>
        </div>
        <div class="statistics-block">
          <BlockItem class="max" title="异地就业实时数据"></BlockItem>
          <div class="rank-block">
            <div class="rank-item head">
              <div class="col-item rank">姓名</div>
              <div class="col-item count">就业岗位</div>
              <div class="col-item type">就业区域</div>
              <div class="col-item time">就业时间</div>
            </div>
            <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
              <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                <div id="scrollItemBox">
                  <div v-for="(item,index) in unitRank" :key="index">
                    <div class="rank-item body" :style="index%2==0?'background-color: #16205F':''">
                      <div class="col-item rank" >{{item.realName}}</div>
                      <div class="col-item count">{{item.wishWorkTypeId?item.wishWorkTypeId:'暂无'}}</div>
                      <div class="col-item type" v-if="item.helpTypeText=='平台'" style="color:#F8B469;">{{item.helpTypeText?item.helpTypeText:'暂无'}}</div>
                      <div class="col-item type" v-else style="color: #40E1A8;">{{item.helpTypeText?item.helpTypeText:'暂无'}}</div>
                      <div class="col-item time">{{item.oneHelpTime?item.oneHelpTime:'暂无'}}</div>
                    </div>
                  </div>
                </div>
                <div v-html="copyHtml"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid grid-right">
        <div class="statistics-block">
          <BlockItem class="max" title="其他地区异地就业⼈员情况"></BlockItem>
          <div class="chart" id="chart5"></div>
        </div>
      </div>
    </div>
    <div class="grid-bottom">
      <div class="grid grid-bot">
        <div class="statistics-block">
          <div class="chart" id="chart3"></div>
        </div>
      </div>
    </div>
    <Modal1 v-if="showMore" @closeModal="showMore=false" :title="title" :name="this.name" width="1050px" :type="type" :seriesName="seriesName">
      <Personal :title="title" :type="type" :seriesName="seriesName"></Personal>
    </Modal1>
  </div>
</template>

<script>
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import {
  aksListApi,

  dhListApi, getHelpCount,
  getListApi,
  getPersonnelApi, gzListApi,
  jtListApi,
 sbListApi, ymListApi
} from "@/api/statistics6";
import { getHelpThreeCountApi} from "@/api/statistics-3";
import NumberItem from "@/components/NumbeItem/NumberItem";
import Modal1 from '@/components/Modal/Modal1'
import Cover from  '@/components/Cover/Cover'
import Personal from "@/components/More/Personal";
export default {
  name: "Statistics6",
  components: {Personal, BlockItem,NumberItem,Modal1},
  data(){
    return{
      info:{
        malePercent:0,
        male:0,
        female:0,
        femalePercent:0,
        age:[]
      },
      chart1Active:1,
      list:[22.47,68.45,12.41,116.54,15.21],
      unitRank:[{
        realName:'陈文婷',
        wishWorkTypeId:'美容师',
        helpTypeText:'青岛',
        oneHelpTime:'2023-08-12',
        oneHelp:'平台推荐培训'
      },
        {
          realName:'殷玉清',
          wishWorkTypeId:'IT',
          helpTypeText:'上海',
          oneHelpTime:'2023-08-12',
          oneHelp:'平台推荐培训'
        },
        {
          realName:'陈丽',
          wishWorkTypeId:'销售',
          helpTypeText:'兰州',
          oneHelpTime:'2023-08-12',
          oneHelp:'平台推荐培训'
        },
        {
          realName:'孙菊兰',
          wishWorkTypeId:'焊工',
          helpTypeText:'郑州',
          oneHelpTime:'2023-08-12',
          oneHelp:'平台推荐培训'
        },{
          realName:'陈文婷',
          wishWorkTypeId:'汽修',
          helpTypeText:'天津',
          oneHelpTime:'2023-08-12',
          oneHelp:'平台推荐培训'
        },],
      copyHtml: '', //复制多一份防止滚动到后面出现空白
      scrollTop: 0, //列表滚动高度    }
      numberData:[
        {id:1,color:['#5c6aff','#4a29d8'],name:'异地就业总⼈数',icon:'icon-caishouzhongliang',number:1047},
        {id:3,color:['#30cbf7','#1997e1'],name:'省内异地就业总⼈数',icon:'icon-caishouzhongliang',number:412},
        {id:2,color:['#12f1b8','#0db5e6'],name:'省外异地就业总⼈数',icon:'icon-caishouzhongliang',number:635},
        {id:4,color:['#f7c759','#fb838f'],name:'10⼤劳务基地就业总⼈数',icon:'icon-huoche',number:66},
      ],
      showMore:false,
      showMore1:false,
      type:1,
      title:'',
      name:'',
      seriesName:'',
      page: 1,
      limit:20,
    }
  },
  mounted() {
    // this.getList()
    this.initChart1()
    // this.getCount();
    this.initChart3()
    this.initChart5()
    this.initScroll()
  },
  methods: {
    chartBind(e){
      this.chart1Active=e
      this.initChart1()
    },
    getCount(){
      getHelpCount().then((res)=>{
        if(res.code===200){
          this.numberData[0].number=res.data.assembleCount
          this.numberData[1].number=res.data.appCount
          this.numberData[2].number=res.data.offlineCount
          this.numberData[3].number=504
        }
      })
    },
    getPersonnel(){
      getPersonnelApi().then((res)=>{
        if(res.code===200){
          this.info=res.data
        }
      })
    },
     getList(){
       getListApi({page:this.page,limit:this.limit,type:1}).then((res)=>{
         const data = res.data.list
         data.forEach(item=>{
           this.unitRank.push(item)
         })
      })
       jtListApi({page:this.page,limit:this.limit,type:1}).then((res)=>{
         // let arr = this.unitRank.concat(res.data.list);
         const data1 = res.data.list
         data1.forEach(item1=>{
           this.unitRank=this.unitRank.concat(item1)
         })
       })
      dhListApi({page:this.page,limit:this.limit,type:1}).then((res)=>{
        for (let i = 0; i < res.data.list.length; i++) {
          this.unitRank.push(res.data.list[i])
        }
      })
      gzListApi({page:this.page,limit:this.limit,type:1}).then((res)=>{
        for (let i = 0; i < res.data.list.length; i++) {
          this.unitRank.push(res.data.list[i])
        }
      })
      ymListApi({page:this.page,limit:this.limit,type:1}).then((res)=>{
        for (let i = 0; i < res.data.list.length; i++) {
          this.unitRank.push(res.data.list[i])
        }
      })
      sbListApi({page:this.page,limit:this.limit,type:1}).then((res)=>{
        for (let i = 0; i < res.data.list.length; i++) {
          this.unitRank.push(res.data.list[i])
        }
      })
      aksListApi({page:this.page,limit:this.limit,type:1}).then((res)=>{
        for (let i = 0; i < res.data.list.length; i++) {
          this.unitRank.push(res.data.list[i])
        }
        this.$nextTick(() => {
          this.copyHtml = document.getElementById("scrollItemBox").innerHTML
        })
      })
    },
    mEnter() {
      clearInterval(this.timer);
    },
    // 鼠标移出继续滚动
    mLeave() {
      this.startScroll()
    },
    initScroll() {
      this.$nextTick(() => {
        this.startScroll()
      })
    },
    // 开始滚动
    startScroll() {
      this.timer = setInterval(this.scroll, 35);
    },
    // 滚动处理方法
    scroll() {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = document.getElementById("scrollItemBox").offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },
    initChart1(){
      let charts = this.$echarts.init(document.getElementById('chart1'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        title: {
         // text: '各县市未就业人数分布',
          left:'center',
          top:10,
          textStyle: {
            color: '#46a9ff',
            fontSize: 17,
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        legend:{
          textStyle:{
            color:'#fff'
          },
          right:10,
          top:10
        },
        grid:{
          top:20,
          left:65,
          right:20,
          bottom:30
        },
        xAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff'
            }
          },
        },
        yAxis: {
          type: 'category',
          data: ['宁远镇','巉口镇','杏园乡','高峰乡','白碌乡','新集乡','青岚山乡','香泉镇',],
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
          axisTick:{
            show:false
          }
        },
        series: [
          {
            //name:'人数',
            data:[81,30,28,74,57,34,12,11,85],
            //data:[],
            type: 'bar',
            barWidth:13,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(17, 49, 119)',
              borderRadius:50
            },
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'right',
                  textStyle:{
                    color:'#fff',
                    fontSize:13
                  },
                },
                barBorderRadius:[15, 15, 15, 15],
                color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
                  offset:0,
                  color:'#01D0F5'
                },{
                  offset:1,
                  color:'#2196FE'
                }])
              }
            }
          }
        ]
      };
      charts.on('click',(e)=>{
        this.showMore=true;
        this.title=e.name
        this.type=1

      })
      // getHelpThreeCountApi().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data[0] = data[6]
      //     option.series[0].data[1] = data[5]
      //     option.series[0].data[2] = data[4]
      //     option.series[0].data[3] = data[3]
      //     option.series[0].data[4] = data[2]
      //     option.series[0].data[5] = data[1]
      //     option.series[0].data[6] = data[0]
      //   }
      // })
      charts.hideLoading();
      charts.setOption(option)

    },
    initChart3(){
      let myCharts = this.$echarts.init(document.getElementById('chart3'));
      let option = {
        xAxis: {
          type: 'category',
          data: ['兰州','嘉峪关','酒泉','张掖','金昌','武威','平凉','庆阳','陇南','天水','白银','临夏','甘南','陇西',],
          axisTick:{
            show:false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:20,
          left:60,
          right:10,
          bottom:40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine:{
            show:true,
          },
          axisTick:{
            show:true,
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            // data: getNum(7,8000,3000),
            data:[69,15,30,14,57,54,12,11,19,69,15,30,14,54,],
            type: 'bar',
            barWidth:17,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#ccc',
                    fontSize:14
                  }
                },
                barBorderRadius:[15, 15, 0, 0],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#41E3A9'
                },{
                  offset:1,
                  color:'#41E3A9'
                }])
              }
            }
          }
        ]
      }
      // personnelSituationApi().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data = []
      //     option.series[1].data = []
      //     option.series[2].data = []
      //     data.forEach(item=>{
      //       option.series[0].data.push(item[0]);
      //       option.series[1].data.push(item[1]);
      //       option.series[2].data.push(item[2]);
      //     })
          myCharts.hideLoading();
          myCharts.setOption(option)
        // }
      // })
      myCharts.hideLoading();
      myCharts.setOption(option)
    },
    initChart5(){
      let charts = this.$echarts.init(document.getElementById('chart5'));
      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        xAxis: {
          type: 'category',
          data: ['青岛','兰州','福田','浦东','郑州','江苏','酒泉','天津','北京',],
          axisTick:{
            show:false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:20,
          left:60,
          right:10,
          bottom:40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine:{
            show:true,
          },
          axisTick:{
            show:true,
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            // data: getNum(7,8000,3000),
            data:[69,15,30,14,57,54,12,11,19],
            type: 'bar',
            barWidth:17,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#ccc',
                    fontSize:14
                  }
                },
                barBorderRadius:[15, 15, 0, 0],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#F1F28F'
                },{
                  offset:1,
                  color:'#41E3A9'
                }])
              }
            }
          }
        ]
      }
      // getSelectCount().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data=data.publishCounts;

      charts.hideLoading();
      charts.setOption(option)
      // }
      // })
    },
  },
  beforeDestroy(){
    clearInterval(this.timer)
  },

}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 2px solid #05548A;
.statistics-content.statistics-6{
  display: flex;
  flex-direction: column;
  height: calc(100% - 140px);
  padding: 0 10px;
}
.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 140px);


  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    //box-shadow: $boxshadow;
    border-radius: 10px;
    background: #0A1456;
    .title-block{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-item{
        display: flex;
        align-items: center;
        .line{
          width: 7px;
          height: 20px;
          border-radius: 16px;
          background: #31a7ff;
          margin-right: 8px;
          flex-grow: 0;
        }
        .title{
          color: #fff;
          flex-grow: 1;
        }
      }
      .tab-block{
        display: flex;
        align-items: center;

        .tab{
          color: #ffffff;
          font-size: 12px;
          background: #123178;
          cursor: pointer;
          padding: 5px 6px;
          border-radius: 4px;
        }
        .tab.active{
          background-image: linear-gradient(to right, #2295FF , #02CEF6);
        }
      }
    }
  }
}

.statistics-content {
  display: flex;
  flex-direction: row;
  .grid-top{
    height: calc(100%/3*2);
    width: 100%;
    display: flex;
  }
  .grid-bottom{
   // height: 100%;
    height: calc(100%/3);
    margin-top: 20px;
  }
  .grid.grid-bot{
    width: 100%;
    .statistics-block{
      width: 100%;
      height: 100%;
      padding: 20px;
      .chart{
        width: 100%;
        //height: calc(100%- 120px);
      }
    }
  }
  .grid {
    height: 100%;
  }
  .grid.grid-left{
    width: calc(100%/3);
    .statistics-block{
      width: 100%;
      height: 100%;
      padding: 20px;
      .structure{
        height: 100%;
        .gender{
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .gender-item{
            width: calc(50% - 10px);
            height: 100%;
            display: flex;
            align-items: center;
            img{
              width: 80px;
              height: 100%;
            }
            .gender-info{
              width: calc(100% - 100px);
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-left: 20px;
              div{
                color: #fff;
              }
              .number{
                font-size: 28px;
                margin-top: 15px;
                .unit{
                  color: #fff;
                  font-size: 14px;
                  font-family: "Microsoft YaHei";
                }
              }
            }
          }
        }
        .progress{
          width: 100%;
          height: calc(100% - 10px);
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }
  }
  .grid.grid-right {
    width: calc(100%/3);
    .statistics-block{
      width: 100%;
      height: 100%;
      padding: 20px;
      .title-block{
        display: flex;
        justify-content: space-between;
        align-items: center;
       .title-item{
         display: flex;
         align-items: center;
         .line{
           width: 7px;
           height: 20px;
           border-radius: 16px;
           background: #31a7ff;
           margin-right: 8px;
           flex-grow: 0;
         }
         .title{
           color: #fff;
           flex-grow: 1;
         }
       }
        .tab-block{
          display: flex;
          align-items: center;

          .tab{
            color: #ffffff;
            font-size: 12px;
            background: #123178;
            cursor: pointer;
            padding: 5px 6px;
            border-radius: 4px;
          }
          .tab.active{
            background-image: linear-gradient(to right, #2295FF , #02CEF6);
          }
        }
    }
    }
  }

  .grid.grid-center{
    width: calc(100%/2);
    padding:0 20px;
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      margin-bottom: 20px;
      .number-item{
        width: calc((100% - 90px)/4);
        margin-right: 30px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
    .statistics-block{
      width: 100%;
      height:calc( 100% - 110px);
      padding: 10px;
      .rank-block{
        display: flex;
        flex-direction: column;
        padding-top: 5px;
        //overflow: hidden;
        //text-overflow: ellipsis;
        //white-space: nowrap;
        .rank-item{
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          .col-item{
            display: flex;
            align-items: center;
            color: #fff;
            padding: 0 2px;
          }
          .col-item.rank{
            width:130px;
            display: flex;
            justify-content: center;
            font-size: 13px;
          }
          .col-item.name{
            width: calc(100% - 150px);
            margin-left: 10px;
            justify-content: flex-start;
            display: block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .col-item.type{
            width: 180px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            font-size: 13px;
          }
          .col-item.time{
            width: 180px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            font-size: 13px;
          }

          .col-item.count{
            width:180px;
            font-size: 13px;
            display: flex;
            justify-content: center;
          }
        }
        .rank-item.head{
          height: 45px;
          /* margin-bottom: 5px; */
          background-color: #232C67;
          padding-left: 10px;
          .col-item{
            justify-content: center;
            font-size: 15px;
          }
          .col-item.name{
            justify-content: flex-start;
          }
        }
        .rank-item.body{
          min-height: 45px;
          margin-bottom: 10px;
          .col-item.rank.background{
            background: #F36838;
            margin: 0 12.5px;
            width: 25px;
            height: 25px;
            border-radius: 4px;
            font-size: 14px;
          }
        }
        .rank-item.body:last-child{
          margin-bottom: 0;
        }
      }
    }
  }
  .statistics-block{
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 20px;
    .chart{
      width: 100%;
      height: 100%;
    }
  }
  .statistics-block:last-child{
    margin-bottom: 0;
  }
  .map-block{
    width: 100%;
    //height: calc(100%/3*2);
    height: 100%;
    position: relative;
    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      .number-item{
        width: calc((100% - 90px)/4);
        margin-right: 30px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
<style lang="scss" scoped>


.scroll_parent_box {
  height: 380px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;
}

.scroll_list {
  overflow: hidden;
  transition: all 0ms ease-in 0s
}

.scroll_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
</style>
